<template>
  <div class="doc_9">
    <p>表单组件主要应用于表单数据提交，以下为常用表单元素；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559118156615-71d0c389-8faa-4b8d-bcb1-20729acd85bc.png?x-oss-process=image/resize,w_494" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_9_1">1. 注意⚠️</h2>
    <p>
      <ol>
        <li>一个页面只允许存在一个 表单提交事件 ；</li>
        <li>表单提交事件 会将本页所有 输入框/单选/多选 等表单元素的数据收集起来，统一提交；</li>
        <li>多页面项目，每个页面的 表单提交事件 互不影响；</li>
        <li>单选题/多选题 元素本身附带表单提交按钮，应避免与其他表单元素出现在同一个页面；</li>
        <li> <strong>当表单中有非输入文本时，一定要使用文本组件，</strong> 而不要使用输入框组件，这样提交表单的时候会去验证这个输入框组件，会出现没有输入的提示；</li>
        <li>还有就是输入框组件有输入类型，如图，这些类型用来在提交的时候用 <strong>来验证的</strong> ，如果你的表单提交没有验证电话，邮箱，那需要你查看下输入类型是否正确；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559266655206-f1701f9b-5678-4489-a232-4cc4b6743c35.png?x-oss-process=image/resize,w_454" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_9_2">2. 表单元素编辑</h2>
    <h3>a. 输入框</h3>
    <p>
      <ol>
        <li>输入类型：姓名/电话/邮箱/其他；</li>
        <li>提示文本：输入框内容为空时的提示内容；</li>
        <li>是否自动填充：目前只有 姓名 可用，依赖于微博登录；会自动填充用户姓名；</li>
        <li>设为必填项：是否为必填项，若必填项值为空，则无法提交数据；必填项输入框带红色 <strong>*</strong> 号；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559120687311-789c8ba9-4435-43f4-8fd3-54d04b62e884.png" alt="">
      </span>
    </p>
    <p></p>

    <h3>b. 短信验证</h3>
    <p>
      <ol>
        <li>按钮样式：可使用默认方案，或者自定义；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559126061026-4c444024-7455-4cfd-9525-a8e45914c06f.png" alt="">
      </span>
    </p>
    <p></p>

    <h3>c. 单选题/多选题</h3>
    <p>自带表单提交事件（提交答案）；</p>
    <p>
      <ol>
        <li>菜单标题：设置选题的标题；</li>
        <li>排列方向：设置选项为横向/纵向；</li>
        <li>选项是否显示图片：设置是否显示选项中的图片；</li>
        <li>增加选项：点击增加选项，并设置选项内容；</li>
        <li>提交结果链接：当选择选项并提交时，跳转到选项对应的链接；</li>
        <li>图片跳转url：点击选项中的图片时跳转到对应链接；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559126158106-a6afcb8e-0e7d-4b63-88ab-1515ec815b88.png" alt="">
      </span>
    </p>
    <p></p>

    <h3>d. 单选/多选</h3>
    <p></p>

    <h3>e. 下拉列表</h3>
    <p></p>

    <h3>f. 提交按钮</h3>
    <p>这个按钮可以自定义按钮的样式，同时在添加这个组件在页面中时，会自动添加”提交事件“，当然你也可以在别的组件上添加”提交事件“，来提交表单。</p>
  </div>
</template>

<script>
  import { submenuMixin } from '@/views/child/doc/data/submenu';
  export default {
    mixins: [submenuMixin],
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/doc.scss';
</style>
